<template>
  <div class="home">
    <div class="header"></div>
    <div class="card-main">
      <div class="card">
        <div class="card__header">
          <img class="card__header-img" src="../../../assets/images/head.png" alt="">
          <img src="../../../assets/images/Party-construction.png" class="construction" alt="">
          <span class="card__header-title">截止 2月2日24时 数据统计·湖北省</span>
        </div>
        <div class="card__body">
          <card></card>
        </div>
      </div>
    </div>
    <van-tabs 
      v-model="tabActive"
      @click="switchTab" 
      swipeable 
      sticky>
      <van-tab>
        <div slot="title">疫情分析</div>
            <div class="section">
        <div class="section-header">医护在线</div>
          <div class="section-title"><i class="section-icon"></i>疫情趋势图</div>
          <div ref="line" class="line"></div>
        </div>
        <div class="section">
          <div class="section-title"><i></i>疫情分布图</div>
          <div ref="map" class="map"></div>
        </div>
        <div class="section">
          <div class="section-title"><i></i>疫情跟踪</div>
          <div ref="bar" class="bar"></div>
        </div>
        <div class="section">
          <div class="section-header">医护在线</div>
          <div class="section-title"><i></i>全省发热门诊接诊人次统计情况</div>
          <e-table :tableHeader=tableHeader :data="table"></e-table>
        </div>
        <div class="section">
          <div class="section-title"><i></i>全省发热门诊留诊人次统计情况</div>
            <e-table :tableHeader=tableHeader :data="table"></e-table>
        </div>
        <div class="section">
          <div class="section-title"><i></i>全省发热门诊日接诊人次统计情况</div>
          <div ref="dailyVisits" class="line"></div>
        </div>
        <div class="section">
          <div class="section-header">疫情分析</div>
          <div class="section-title"><i></i>死亡病例性别比例</div>
          <death-cases-sex-ratio :data=ratio></death-cases-sex-ratio>
        </div>
        <div class="section">
          <div class="section-title"><i></i>死亡病例基础疾病比例</div>
          <death-cases-sex-ratio :data=ratio2></death-cases-sex-ratio>
        </div>
        <div class="section">
          <div class="section-title"><i></i>死亡病例年龄分布</div>
          <death-cases-age-ratio :data="ratio3"></death-cases-age-ratio>
        </div>
        <div class="section">
          <div class="section-title"><i></i>死亡病例地区分布</div>
          <div ref="deathCasesRegional" class="map"></div>
          <death-cases-regional-text :article=article></death-cases-regional-text>
        </div>
      </van-tab>

      <van-tab>
        <div slot="title">医疗救治</div>
        <div>医疗救治</div>
      </van-tab>

      <van-tab>
        <div slot="title">物质保障</div>
        <!-- 物质保障 -->
        <div class="section">
          <div class="section-title"><i class="section-icon"></i>医用防护物资统计情况</div>
          <div class="bar" ref="material_statistics"></div>
          <article-text :article=materialSupportMaterialArticle></article-text>
        </div>
        <div class="section">
          <div class="section-title"><i class="section-icon"></i>医用防护物资需求统计情况</div>
          <material-support-material-need 
            :tableHeader=materialSupportMaterialNeedHeader 
            :data="materialSupportMaterialNeedBody">
          </material-support-material-need>
        </div>
        <div class="section">
          <div class="section-title"><i class="section-icon"></i>医用防护物质需求趋势</div>
          <div ref="materialNeedTrend" class="line"></div>
        </div>
        <div class="section">
          <div class="section-title"><i class="section-icon"></i>疫情防控重点物资需求统计情况</div>
          <material-support-material-important
            :tableHeader=materialSupportMaterialImportantHeader 
            :data="materialSupportMaterialImportantBody">
          </material-support-material-important>
        </div>
        <div class="section">
          <div class="section-title"><i class="section-icon"></i>核酸检测统计情况</div>
          <div class="bar" ref="nucleicAcidDetection"></div>
          <article-text :article=materialSupportNucleicAcidDetectionAarticle></article-text>
        </div>
      </van-tab>

      <van-tab>
        <div slot="title">市场供应</div>
        <!-- 市场供应 -->
        <div class="section">
          <div class="section-title"><i class="section-icon"></i>孝感城区各大型超市物资储备情况</div>
          <market-supply-big-supermarket 
            :tableHeader=marketSupplyBigSupermarketTableHeader 
            :data="marketSupplyBigSupermarketTableBody">
          </market-supply-big-supermarket> 
          <article-text :article=marketSupplyBigSupermarketArticle></article-text>
        </div>
        <div class="section">
          <div class="section-title"><i class="section-icon"></i>雷神山和火神山医院床位统计情况</div>
          <market-supply-hospital-beds
            :tableHeader=MarketSupplyHospitalBedsTableHeader 
            :data="MarketSupplyHospitalBedsTableBody">
          </market-supply-hospital-beds>
          <article-text :article=MarketSupplyHospitalBedsArticle></article-text>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Card from "../components/card";
import ETable from '../components/Table.vue'
import dailyVisitsOPition from '../data/dailyVisits'
import deathCasesRegionalOption from '../data/deathCasesRegional'
import DeathCasesSexRatio from '../components/DeathCasesSexRatio'
import DeathCasesAgeRatio from '../components/DeathCasesAgeRatio'
import DeathCasesRegionalText from '../components/DeathCasesRegionalText'
import echarts from "echarts";
import 'echarts/map/js/province/hubei.js'; //引入湖北地图
import option from "../data/map-option.js";
import lineOption from "../data/line-option";
import barOption from "../data/bar-option";

// 公用组件
import ArticleText from '../components/ArticleText'

// 物资保障
import MaterialSupportMaterialNeed from '../components/MaterialSupportMaterialNeed'
import MaterialSupportMaterialImportant from '../components/MaterialSupportMaterialImportant'
import materialSupportMaterialStatistics from '../data/materialSupportMaterialStatistics'
import materialSupportMaterialNeedTrend from '../data/materialSupportMaterialNeedTrend'
import materialSupportNucleicAcidDetection from '../data/materialSupportNucleicAcidDetection'

// 市场供应
import MarketSupplyBigSupermarket from '../components/MarketSupplyBigSupermarket'
import MarketSupplyHospitalBeds from '../components/MarketSupplyHospitalBeds'
export default {
  data () {
    return {
      tabActive: 2,

      table: [],
      tableHeader: [
        {
          name: '地区'
        },
        {
          name: '当天'
        },
        {
          name: '当日'
        },
        {
          name: '较前日增加'
        },
        {
          name: '较前日增幅'
        }
      ],
      tableHeader2: [
        {
          name: '地区'
        },
        {
          name: '医用防护服（套）'
        },
        {
          name: 'N95口罩（个）'
        },
        {
          name: '医用外科口罩（个）'
        },
        {
          name: '防雾护目镜或护面罩（套）'
        },
        {
          name: '隔离衣（套）'
        }
      ],
      tableHeader3: [
        {
          name: '品类'
        },
        {
          name: '数量（顿）'
        },
        {
          name: '平均供应时间（天）'
        },
      ],
      tableHeader4: [
        {
          name: '医院名称'
        },
        {
          name: '床位数量（张）'
        },
        {
          name: '建筑面积（万平方米）'
        }
      ],
      ratio: [
        {
          text: '男性',
          num: 68,
          text_bg: '#387DCE',
          ratio_bg: '#4A90E2'
        },
        {
          text: '女性',
          num: 32,
          text_bg: '#D0021B',
          ratio_bg: '#FD4F63'
        }
      ],
      ratio2: [
        {
          text: '有',
          num: 76.29,
          text_bg: '#387DCE',
          ratio_bg: '#4A90E2'
        },
        {
          text: '无',
          num: 23.71,
          text_bg: '#D0021B',
          ratio_bg: '#FD4F63'
        }
      ],
      ratio3: [
        {
          age: '21-30',
          num: 1,
          color: '#F9EED2'
        },
        {
          age: '31-40',
          num: 10,
          color: '#F2AB8F'
        },
        {
          age: '41-50',
          num: 15,
          color: '#EC873D'
        },
        {
          age: '51-60',
          num: 15,
          color: '#E76302'
        },
        {
          age: '61-70',
          num: 20,
          color: '#C63031'
        },
        {
          age: '71-80',
          num: 9,
          color: '#B31514'
        },
        {
          age: '大于80',
          num: 30,
          color: '#72161A'
        }
      ],
      text: ' 截至2020年2月2日24时，全省累计报告病例11177例，病例数排名前3的是：武汉市5142例、黄冈市1246例、孝感市918例。目前，已治愈出院295例，死亡350例；在院治疗9618例，其中：重症1223例、危重症478例。 从死亡病例地区分布来看，死亡人数超过100例的分别是武汉、黄冈、孝感和荆州；全省350例死亡病例中，男性234例、女性116例；21岁至30岁1例，31岁至40岁7例，41岁至50岁19例，51岁至60岁50例，61岁至70岁126例，71岁至80岁82例，81岁以上65例；年龄最小的27岁、最大的99岁。其中，267例有明确基础性疾病史。',
      article: [
        {
          text: ' 截至2020年2月2日24时，全省累计报告病例11177例，病例数排名前3的是：武汉市5142例、黄冈市1246例、孝感市918例。目前，已治愈出院295例，死亡350例；在院治疗9618例，其中：重症1223例、危重症478例。'
        },
        {
          text: '从死亡病例地区分布来看，死亡人数超过100例的分别是武汉、黄冈、孝感和荆州；全省350例死亡病例中，男性234例、女性116例；21岁至30岁1例，31岁至40岁7例，41岁至50岁19例，51岁至60岁50例，61岁至70岁126例，71岁至80岁82例，81岁以上65例；年龄最小的27岁、最大的99岁。其中，267例有明确基础性疾病史。'
        }
      ],

      // 物质保障
      materialSupportMaterialArticle: [
        {
          text: '根据全省发病人数、疑似病人、留观人数、发热病人等因素，结合医用防护物资分级配置标准，当日全省主要医用防护物资需求量为：'
        },
        {
          text: '医用防护服6.25万套、医用防护口罩（N95口罩）13.23万个、医用外科口罩110.38万个、护目镜或防护面罩6.98万个、隔离衣6.98万套。'
        },
        {
          text: '当日收到医用防护服1万套、N95口罩0个、医用外科口罩0个、护目镜或面罩0.1万个、隔离衣0套，已在规定时限内全部调运各地。'
        },
        {
          text: '当日缺防护服5.25万套、N95口罩13.23万个、医用外科口罩110.38万个、护目镜或防护面罩6.88万个、隔离衣6.98万套。'
        }
      ],
      materialSupportMaterialNeedHeader: [
        {
          name: '地区'
        },
        {
          name: '医用防护服（套）'
        },
        {
          name: 'N95口罩（个）'
        },
        {
          name: '医用外科口罩（个）'
        },
        {
          name: '防雾护目镜或护面罩（套）'
        },
        {
          name: '隔离衣（套）'
        }
      ],
      materialSupportMaterialNeedBody: [
        {
          one: '湖北',
          two: '62494',
          three: '134497',
          four: '1103826',
          five: '69803',
          six: '69803'
        },
        {
          one: '武汉',
          two: '62494',
          three: '134497',
          four: '1103826',
          five: '69803',
          six: '69803'
        },
        {
          one: '黄石',
          two: '62494',
          three: '134497',
          four: '1103826',
          five: '69803',
          six: '69803'
        }
      ],
      materialSupportMaterialImportantHeader: [
        {
          name: '类别'
        },
        {
          name: '品名'
        },
        {
          name: '未来7天'
        },
        {
          name: '未来15天'
        },
        {
          name: '未来30天'
        },
        {
          name: '单位'
        }
      ],
      materialSupportMaterialImportantBody: [
        {
          one: '防护',
          two: '外科口罩',
          three: '861',
          four: '1845万',
          five: '3690万',
          six: '万个'
        },
        {
          one: '防护',
          two: '外科口罩',
          three: '861',
          four: '1845万',
          five: '3690万',
          six: '万个'
        }
      ],
      materialSupportNucleicAcidDetectionAarticle: [
        {
          text: '截止2月1日，全省上报核酸检测例数3932例，阳性病例850例，阳性率21.6%，库存病例2375例；其中武汉市上报核酸检测例数2450例，阳性病例757例，阳性率30.9%，武汉市库存病例已全部检测（备注：因检验周期需要6-8 小时，每日检验结果于次日上报）。第三方检测机构从武汉市疾控中心领取试剂盒6912人份，预计检测能力为4000例/日。全省各市州（除武汉市）疑似病例数6228例，完成检测5360例，省卫健委将根据市州需要和检测机构能力，在全省范围内进行统一调剂。'
        }
      ],


      // 市场供应
      marketSupplyBigSupermarketTableHeader: [
         {
          name: '品类'
        },
        {
          name: '数量（顿）'
        },
        {
          name: '平均供应时间（天）'
        },
      ],
      marketSupplyBigSupermarketTableBody: [
        {
          one: '大米',
          two: '498.4',
          three: '13'
        },
        {
          one: '面',
          two: '191',
          three: '13'
        },
        {
          one: '实用油',
          two: '611.99',
          three: '62'
        },
        {
          one: '蛋',
          two: '42',
          three: '4'
        },
        {
          one: '奶',
          two: '410.03',
          three: '37'
        },
        {
          one: '肉',
          two: '33.1',
          three: '5'
        },
        {
          one: '蔬菜',
          two: '176',
          three: '2'
        }
      ],
      marketSupplyBigSupermarketArticle: [
        {
          text: ' 关于中央指导组交办及省指挥部会议决定关于支持孝感等地做好蔬菜、肉类等生活物资供应工作。市场供应组指导孝感市加强城区各大型超市物资储备，截至2月2日12时，孝感市大型商超共储备大米498.4吨、面191吨、食用油611.99吨、蛋42吨、奶410.03吨、肉类33.1吨、蔬菜176吨，分别平均可供应13天、13天、62天、4天、37天、5天、2天，对主要生活物资实施滚动补足、保供保鲜，并严格控制物价。'
        }
      ],

      MarketSupplyHospitalBedsTableHeader: [
        {
          name: '医院名称'
        },
        {
          name: '床位数量（张）'
        },
        {
          name: '建筑面积（万平方米）'
        }
      ],
      MarketSupplyHospitalBedsTableBody: [
        {
          one: '火神山医院',
          two: '1000',
          three: '3.4'
        },
        {
          one: '雷神山医院',
          two: '1500',
          three: '7.5'
        }
      ],
      MarketSupplyHospitalBedsArticle: [
        {
          text: ' 2月2日，武汉市与联勤保障部队在火神山医院签署互换交接文件，火神山医院正式交付军队医务工作者，医院建筑面积3.4万平方米，设床位1000张。雷神山医院建设加紧进行，建筑面积7.5万平方米，设床位1500张，预计5日交付投用，6日正式收治病人。'
        }
      ]
    }
  },
  components: {
    Card,
    ETable,
    DeathCasesSexRatio,
    DeathCasesAgeRatio,
    DeathCasesRegionalText,

    // 公用组件
    ArticleText,

    // 物质保障
    MaterialSupportMaterialNeed,
    MaterialSupportMaterialImportant,

    // 市场供应
    MarketSupplyBigSupermarket,
    MarketSupplyHospitalBeds
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.mapEchartsInit();
    //   this.lineEchartsInit();
    //   this.barEchartsInit();
    // })
    // this.mapEchartsInit();
    // this.lineEchartsInit();
    // this.barEchartsInit();
    this.initData();
    this.getData();
  },
  methods: {
    // 初始化数据
    initData () {
      let index = this.tabActive
      this.$nextTick(() => {
        if (index == 0) {
          this.epidemicAnalysisInit()
        } else if (index == 1) {
          this.medicalTreatmentInit()
        } else if (index == 2) {
          this.materialSupportInit()
        } else if (index == 3) {
          this.marketSupplyInit()
        }
       })
    },
    // 切tab
    switchTab (index) {
      console.log(index)
       this.$nextTick(() => {
        if (index == 0) {
          this.epidemicAnalysisInit()
        } else if (index == 1) {
          this.medicalTreatmentInit()
        } else if (index == 2) {
          this.materialSupportInit()
        } else if (index == 3) {
          this.marketSupplyInit()
        }
       })
    },
    // 疫情分析
    epidemicAnalysisInit () {
      var myChart=echarts.init(this.$refs.map);
      var deathCasesRegionalChart=echarts.init(this.$refs.deathCasesRegional);
      var line=echarts.init(this.$refs.line);
      var dailyVisits = echarts.init(this.$refs.dailyVisits);
      var bar=echarts.init(this.$refs.bar);

      myChart.setOption(option, true);
      deathCasesRegionalChart.setOption(deathCasesRegionalOption, true);
      line.setOption(lineOption, true);
      dailyVisits.setOption(dailyVisitsOPition, true);
      bar.setOption(barOption, true);
    },
    // 医疗救治
    medicalTreatmentInit () {

    },
    // 物质保障
    materialSupportInit () {
      var materialNeedTrend = echarts.init(this.$refs.materialNeedTrend)
      var material_statistics_bar=echarts.init(this.$refs.material_statistics);
      var nucleicAcidDetection = echarts.init(this.$refs.nucleicAcidDetection);
      materialNeedTrend.setOption(materialSupportMaterialNeedTrend, true)
      material_statistics_bar.setOption(materialSupportMaterialStatistics, true);
      nucleicAcidDetection.setOption(materialSupportNucleicAcidDetection, true)
    },
    // 市场供应
    marketSupplyInit () {

    },
    mapEchartsInit(){
        var myChart=echarts.init(this.$refs.map);
        var deathCasesRegionalChart=echarts.init(this.$refs.deathCasesRegional);
        myChart.setOption(option, true);
        deathCasesRegionalChart.setOption(deathCasesRegionalOption, true);
      },
      lineEchartsInit(){
        var line=echarts.init(this.$refs.line);
        var dailyVisits = echarts.init(this.$refs.dailyVisits);
        var materialNeedTrend = echarts.init(this.$refs.materialNeedTrend)
        line.setOption(lineOption, true);
        dailyVisits.setOption(dailyVisitsOPition, true);
        materialNeedTrend.setOption(materialSupportMaterialNeedTrend, true)
      },
      barEchartsInit(){
        var bar=echarts.init(this.$refs.bar);
        var material_statistics_bar=echarts.init(this.$refs.material_statistics);
        var nucleicAcidDetection = echarts.init(this.$refs.nucleicAcidDetection);
        bar.setOption(barOption, true);
        material_statistics_bar.setOption(materialSupportMaterialStatistics, true);
        nucleicAcidDetection.setOption(materialSupportNucleicAcidDetection, true)
      },
    getData () {
      this.$http.get('/area.json', null).then((res) => {
        console.log(res)
        let area = res.data
        this.table = area.areaTree[0].children[0]['children']
        console.log(this.table)
      }).catch((error) => {
        console.log(error)
      })
    },  
  }
}
</script>
<style lang="less">
  .header {
    width: 100%;
    height: 138px;
    background-image: url(../../../assets/images/banner.png);
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .card-main {
    padding: 0 15px;
    margin-top: -44px;
  }
  .card {
    height: 100%;
    border-radius: 5px;
    background: #fff;
    &__header {
      position: relative;
      width: 100%;
      &-img {
        width: 90%;
        margin-top: -5px;
      }
      &-title {
        position: absolute;
        left: 79px;
        top: 6px;
        font-size: 14px;
        color: #fff
      }
    }
    .construction {
      position: absolute;
      left: 54px;
      top: 6px;
    }
  }
  .section {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    .section-item {
      margin-top: 10px;
    }
    .section-header {
      color: #D0021B;
      padding: 10px 15px;
    }
    .section-icon {
      display: inline-block;
      width: 3px;
      height: 12px;
      margin-right: 5px;
      background: #D0021B;
    }
    .section-title{
      color: #333;
      padding: 20px 0 10px 15px;
    }
  }



  
  .line, .map, .bar {
    height:300px;
    box-shadow:0rem 0.06rem 0.63rem 0rem rgba(102,104,109,0.05);
  }
</style>